<template>
  <div class="header">
  		<div class="header-left">
  			<div class="iconfont back-icon">&#xe624;</div>
  		</div>
  		<div class="header-input" >
  			<span class="iconfont">&#xe632;</span>
  			输入城市/景点/游玩主题
  		</div>
  		<router-link to="/city">
	  		<div class="header-right">
	  			{{this.$store.state.city}}
	  			<span class="iconfont arrow-icon">&#xe64a;</span>
	  		</div>
  		</router-link>
  </div>
</template>

<script>

export default {
  name: 'HomeHeader',
  
}
</script>

<style lang="stylus" scoped> 
 /*scoped是为了让这里的样式只对header这个组件有效，对其他组件或者页面没有任何的影响，大大方便了我们的类名命名
*/
	@import '~styles/varibles.styl'
	  /* 这里的波浪线应该是用半角的，不应该用全角。  波浪线作用是导入外部css时说明这是外部导入*/
	.header {
		display: flex;
		height:.86rem;
		background:$bgColor;
		color: #fff;
		align-items: center;
	}
	.header-left{
		width:.64rem;
		/*float:left;*/
	}
	.back-icon {
		text-align: center;
		font-size: .4rem;
	}
	.header-input{
		flex:1;
		height:.64rem;
	/*	margin-top:.12rem;*/
		background:#fff;
		border-radius:.1rem;
		color: #ccc;
		line-height: .64rem
		padding-left:.2rem;
	}
	.header-right{
		min-width:1.04rem;
		padding:0.1rem;
		/*float:right;*/
		text-align:center;
		align-items: center;
		color:#fff;
	}
	.arrow-icon {
		font-size: .24rem;
		margin-left: -.04rem
	}




</style>